<template>
    <div style="height: 120%;">
        <el-row type="flex" justify="center"
                :gutter="20" style="height: auto;">
            <el-col :span="5" :offset="2" >
                <el-menu
                        default-active="totalSale"
                        class="el-menu-vertical-demo"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        style="box-shadow: 0 4px 8px;height: 100%">
                    <el-menu-item index="totalSale">总销量统计</el-menu-item>
                    <el-submenu index="type">
                        <template slot="title">
                            <span>车型销量</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="typeLegend in carSaleTrendLegends" :index="'carSaleTrend/'+typeLegend">
                                <span v-text="typeLegend"></span>销量走势</el-menu-item>
                            <el-menu-item  index="suvAndMpvSales">车型总销量占比</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="national">
                        <template slot="title">
                            <span>汽车国系</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="nationalLegend in nationalCarSaleLegends" :index="'nationalCarSales/'+nationalLegend">
                                <span v-text="nationalLegend"></span>系列销量走势</el-menu-item>
                            <el-menu-item index="totalNationalSale">国系销量占比</el-menu-item>
                            <el-menu-item index="suvNationalSale">SUV国系销量对比</el-menu-item>
                            <el-menu-item index="mpvNationalSale">MPV国系销量对比</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="carSaleMonthTopTen">各月前十热门车辆排行榜</el-menu-item>
                    <el-menu-item index="brandSale"><span slot="title">品牌销量</span></el-menu-item>         </el-menu>
            </el-col>
            <el-col :span="14" style="height:auto;background-color:white">
                <!--                        放置销售分析视图组件-->
                <router-view></router-view>
            </el-col>


        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                defaultViewName: 'totalSale',
                carSaleTrendLegends: [],
                nationalCarSaleLegends:[],
                year:''
// carSaleTrendSer
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                // this.$router.push({path:'/saleAnaly/'+key})
            },
        },


        mounted() {
            // this.$router.push({path:'/saleAnaly/'+this.defaultViewName})
        },

    };
</script>

<style scoped>

</style>